<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style>
 
body {
  font-family: sans-serif;
}

#addButton {
  margin: 0 10px;
}

.description {
  margin: 0 10px;
}

#chartContainer {
  display: flex;
}

.no-flex #chartContainer {
  display: inline;
}

.resizable { 
  display: inline-block;
  width: 150px; 
  height: 150px; 
  padding: 0em; 
  padding-bottom: 2em;
  margin: 1em;
  font-size: 10px;
  background: #EFEFEF;
}

.resizable h3 { 
  text-align: center; 
  margin: 0;
  height: 16px;
  border: none;
  cursor: default;
}

.resizable svg {
  width: 100%;
  height: 100%;
}


.arc {
  stroke: #666666;
  stroke-width: 0.5;
}

text {
  font: 8px sans-serif;
  pointer-events: none;
}

text.id {
  text-anchor: middle;
  font-weight: bold;
}

.ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se {
  z-index: 0 !important;
}
</style>
</head>
<body>
  <div id="chartContainer"></div>
	<script
		src="${pageContext.request.contextPath}/static/fw/plugin/d3/d3.min.js"
		charset="utf-8"></script>
		<script
		src="${pageContext.request.contextPath}/static/fw/plugin/x3dom/x3dom.js"
		charset="utf-8"></script>
	<script>
	function randomData() {
        return d3.range(6).map( function() { return Math.random()*20; } )
      };

      x3d = d3.select("body")
                    .append("x3d")
                    .attr( "height", "400px" )
                    .attr( "width", "400px" )
                    ;
      var scene = x3d.append("scene");
      scene.append("viewpoint")
           .attr( "centerOfRotation", "3.75 0 10")
           .attr( "position", "13.742265188709691 -27.453522975182366 16.816062840792625" )
           .attr( "orientation", "0.962043810961999 0.1696342804961945 0.21376603254551874 1.379433089729343" )
           ;

      function refresh( data ) {
        shapes = scene.selectAll("transform").data( data );
        shapesEnter = shapes
             .enter()
             .append( "transform" )
             .append( "shape" )
             ;
        // Enter and update
        shapes.transition()
              .attr("translation", function(d,i) { return i*1.5 + " 0.0 " + d/2.0; } )
              .attr("scale", function(d) { return "1.0 1.0 " + d; } )
              ;

        shapesEnter
            .append("appearance")
              .append("material")
              .attr("diffuseColor", "steelblue" );

        shapesEnter.append( "box" )
          .attr( "size", "1.0 1.0 1.0" );
      }

      refresh( randomData() )
      setInterval(
        function(){
          refresh( randomData() );
        },
        2500);

	
	</script>
</body>
</html>